<template>
	<view class="cate">
		
		<view class="cate-scroll">
			<!-- 侧边 -->
			<scroll-view scroll-y="true" class="left">
				<view class="side-bar" :class="{active:currentIndex == index}" v-for="(item,index) in cateList" :key="index" @click="change(index)">
					<text>{{item.cat_name}}</text>
				</view>
			</scroll-view>
			<!-- 右边内容 -->
			<scroll-view scroll-y="true" class="right">
				<!-- 第一种 -->
				<!-- <view class="right-con" v-for="(item,index) in cateList[currentIndex].children"></view> -->
				<!-- 第二种 -->
				<view class="right-con" v-for="(item,index) in twoList" :key="index">
					<view class="two-titlt">
						/{{item.cat_name}}/
					</view>
					<!-- 三级分类 -->
					<view class="third-title">
						<view class="" v-for="ele,i in item.children" :key="i">
							<navigator :url="'/sub/pages/goods_list?id='+ele.cat_id">
								<image :src="ele.cat_icon" mode=""></image>
							</navigator>
							<p>{{ele.cat_name}}</p>
						</view>
					</view>
					
				</view> 
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	import {getCate} from '../../utils/api.js'
	export default {
		data() {
			return {
				cateList:[],
				currentIndex:0,//保存点击侧边栏的下标
				twoList:[],//保存二级分类
				
			}
		},
		onLoad() {
			getCate().then(res=>{
				console.log(res);
				this.cateList = res
				this.change(0)
				
			})
		},
		methods: {
			// 点击侧边栏事件
			change(index){
				this.currentIndex = index
				this.twoList = this.cateList[index].children
			}
			
		}
	}
</script>

<style lang="scss">
.cate{
	height: 100vh;
	.cate-scroll{
		display: flex;
		height: 100%;
		.left{
			width: 30%;
			height: 100%;
			background: #f5f5f5;
			.side-bar{
				width: 100%;
				display: flex;
				line-height: 100rpx;
				align-items: center;
				justify-content: center;
				
			}
			.active{
				background: #fff;
				height: 100rpx;
				line-height: 100rpx;
				text{
					width: 100%;
					line-height: 80%;
					border-left: 6rpx solid #c00;
					text-align: center;
				}
				
			}
			
		}
	}
}
.right{
	flex:1;
	padding: 0 10rpx;
	.two-titlt{
		width: 100%;
		text-align: center;
		font-size: 28rpx;
		line-height: 80rpx;
	}
	.third-title{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		image{
			width: 150rpx;
			height: 150rpx;
		}
	}
}

</style>
